<template>
       <div class="app-cart">
           <header class="mint-header"><div class="mint-header-button is-left"><a  class="router-link-active"  @click="goback"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div> <h1 class="mint-header-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;  font-size:18px;">仁医购物车</font></font></h1> <div class="mint-header-button is-right"><button class="mint-button mint-button--default mint-button--normal"><label class="mint-button-text"></label></button></div></header>
           <div class="mui-card" v-for="(item,i) of goodslist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						 <mt-switch v-model="$store.getters.getGoodsSelect[item.lid]"  @change="selectedchange(item.lid,$store.getters.getGoodsSelect[item.lid])"></mt-switch> 
                        <img :src="item.pic" alt="">
					    <span class="title">{{item.title}}</span>
                        <span class="price" >￥{{item.price}}</span> 
                        <numbox  :initcount="$store.getters.getGoodsCount[item.lid]" :goodsid="item.lid" ></numbox> 
                        <a href="#" @click.prevent="remove(item.lid,i)"  class="sc">删&nbsp;&nbsp;&nbsp;除</a>
                    </div>
				</div>
			</div>
          <div class="mint-tabbar is-fixed" style="height:56px;">
              <a class="mint-tab-item color2  zj" >
                  <div class="mint-tab-item-label ">
                      <font style="vertical-align: inherit;">
                          <font style="vertical-align: inherit;color:red;text-align:left;font-size:18px;">总计：￥{{$store.getters. getSum.amount}}元</font>
                          </font>
                  </div>
              </a> 
              <a class="mint-tab-item  color1  js"> 
                  <div class="mint-tab-item-label ">
                      <font style="vertical-align: bottom;">
                          <font style="vertical-align:bottom;color:#fff;font-size:18px;">去结算({{$store.getters.getSum.count}})</font>
                    </font>
                 </div>
              </a>
            </div> 
           
  
  
  
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
            
        </div> 
          
</template>
<script>
import numbox from './num.vue'

    export default{
        data(){
            return{lid:this.$route.query.id,goodslist:[]
               
            }
        },
       
        methods:{
            getCartList(){
                var idArr=[];
                this.$store.state.car.forEach(item => idArr.push(item.id));
                if(idArr.length<=0){
                    return;
                }
                  this.$http.get("http://127.0.0.1:3000/getnanxinglist2?lid=" + idArr.join(",")).then(result=>{
                    this.goodslist=result.body;
                   
                   })
            },
            
                   remove(id,index){
                      this.goodslist.splice(index,1);
                       this.$store.commit("removeFormCar",id)
                    },
                    selectedchange(id,val){
                     this.$store.commit("updataGoodsSelected",{id,selected:val})
                    },
                    goback(){
                        history.go(-1);
                    }

        },
        created() {
             this. getCartList()
            },
            components:{
            "numbox":numbox
        }
        }
</script>
<style>
.app-cart img{
    width: 80px;
    height: 80px;
    margin: 15px;
}
.app-cart  .title{
    display:block;
    position: relative;
     top: -100px;
    left: 100px; 
}
.app-cart .price{
    display: inline-block;
    position: relative;
    top: -70px;
   left: 110px;
    color: red;
    font-size: 18px;
} 
.app-cart .del{
    display:inline-block;
    margin-left: 30px;
    height: 30px;
    width: 100px;
    border-radius: 15px; 
    text-align: center;
    line-height: 28px;
    color: black;
    box-shadow: 5px;
    background: rgb(224, 48, 48);
}
div.mint-tabbar   a.zj{
    background: #ccc;
    text-align: left;
    text-indent: 30px;
    padding-top: 19px;
    
}
.sc{
    position: absolute;
    bottom: 18px;;
    right: 30px;
    display: block;
    width: 100px;
    height: 33px;
    color: #fff;
    background: rgb(224, 48, 48);
    border: 2px solid rgb(230, 54, 54);
    border-radius: 20px;
    text-align: center;
    line-height: 28px; 

}
div.mint-tabbar   a.js{
    background: rgb(224, 48, 48);
     padding-top: 19px;
}
header{
   position: fixed;
 }
</style>
    